{% extends 'wxchat/wxbase.html' %}{% load static %}

{% block extra %}
      {% include 'shopping/include/jssdk.html' %}
{% endblock extra%}
{% block tab %}
 <div class="weui-tab__panel">
     <div class="weui-panel">
        <div class="weui-panel__hd header_bottom">
             <div class="weui-flex">
                <div><a href="javascript:window.history.back(-1)"><i class="icon iconfont icon-jiantou3 gray " ></i></a></div>
                <div class="weui-flex__item" style="text-align: center;"><span class="detail_title">宠粮定制详情</span></div>
                <div ><a href="{% url 'dog-index' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shouye2 pink r" ></i></a></div>
            </div>
        </div>
        <div class="weui-panel__bd">
            <div class="weui-cells cells_top">
                <a class="weui-cell weui-cell_access" href="javascript:;" id="wxaddress">
                    <div class="weui-cell__bd">
                        <p>
                            <span id="username">购买人姓名及联系方式</span>
                            <span style="padding-left: 10px;" id="telnumber"></span>
                            <span id="postalcode" style="display:none"></span>
                        </p>
                    </div>
                    <div class="weui-cell__ft"></div>
                </a>
            </div>
            <div class="weui-cells__title black" >选择购买价格：</div>
            <div class="weui-cells weui-cells_checkbox" style="margin-top: 0;display: flex;flex-wrap:wrap">
                {% for price in prices %}
                    <label class="weui-cell weui-check__label cell-before" for="price_{{ price.id }}" style="width:40%;border-top:0;">
                        <div class="weui-cell__hd">
                            <input type="radio" class="weui-check" name="price" value="{{ price.price }}" id="price_{{ price.id }}" >
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd"><p>{{ price.price|floatformat:0}}元/斤</p></div>
                    </label>
                {% endfor %}
            </div>
            <div class="weui-cells cells_top">
                <div class="weui-cell">
                    <div class="weui-cell__bd" style="font-size: 14px;"><p>选择购买数量：</p></div>
                    <div class="weui-cell__ft">
                      <div class="weui-count">
                        <a class="weui-count__btn weui-count__decrease"></a>
                        <input class="weui-count__number" type="number" value="1" style="font-size: 1em;">
                        <a class="weui-count__btn weui-count__increase"></a>
                      </div> (单位:斤)
                    </div>
                </div>
            </div>
            {% if choice_list %}
            <div class="weui-cells__title black">宠粮定制选项：</div>
            <div class="weui-cells cells_top">
                {% for key,value in choice_list.items %}
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label" style="text-align: center;color:#5b5a5a;">{{ value.0 }}:</label> </div>
                        <div class="weui-cell__bd js_value" data-item="{{ value.2 }}|{{ value.1 }}"><p> {{ value.1 }}</p></div>
                    </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
     </div>
 </div>
<div class="weui-tabbar">
     <a href="javascript:;" class="weui-tabbar__item tabbar_item" id="gotopay">
        <p class="weui-tabbar__label bg_red"><i class="icon iconfont icon-jiaoyi3" ></i> 提交订单</p>
    </a>
</div>
    <script>

    wx.ready(function(){
    ///客户地址信息
     $('#wxaddress').on('click',function(){
        wx.openAddress({
              success:function (res) {
                  $('#username').text(res.userName);
                  $('#telnumber').text(res.telNumber);
                  $('#postalcode').text(res.postalCode);
              },
              cancel:function (res) {},
              fail:function (res) {}
        });
    });

     $('#gotopay').on('click',function(){

            if($('#telnumber').text() == '' || $('#username').text() == ''){
                weui.alert('请填写收件人姓名、详细地址等信息');
                return;
            }

            var radio_price = $("input[name='price']:checked").val();
            if(radio_price == undefined){
                weui.alert('请选择价格?');
                return;
            }

            var nums = $(".weui-count__number").val();
            if(nums == 0){
                weui.alert('请选择购买数量?');
                return;
            }

            arr = new Array();
            var list = $(".js_value");

            $.each(list,function( index,value ){
                arr.push($(this).attr("data-item"));
            });

            var params ={
                csrfmiddlewaretoken:'{{ csrf_token }}',
                price: radio_price,
                nums: nums,
                userName: $("#username").text(),
                telNumber: $('#telnumber').text(),
                postalCode: $('#postalcode').text(),
                datalist: arr,
            };

           $.ajax({
              type: 'POST',
              url: '{% url "order-success" %}',
              dataType: 'json',
              data:params,
              timeout: 5000,
              success: function(data){
                  if(data.success == "true"){
                      window.location.href = '{% url "order-list" %}?out_trade_no=' + data.out_trade_no
                  }
              },
              error: function(error){}
            });

        });
});

$(function(){
    counter();
})

function counter(){
      var MAX = 99, MIN = 0;
      $('.weui-count__decrease').click(function (e) {
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") - 1
        if (number < MIN) number = MIN;
        $input.val(number)
      });

      $('.weui-count__increase').click(function (e) {
        var $input = $(e.currentTarget).parent().find('.weui-count__number');
        var number = parseInt($input.val() || "0") + 1
        if (number > MAX) number = MAX;
        $input.val(number);

      });

}
</script>

{% endblock tab %}

